<!DOCTYPE html>
<html lang="en">

<head>
    {include file="common/meta" /}
    <link rel="stylesheet" href="__CDN__/static/style/index.css" />
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        {include file="common/head" /}

        <!-- 内容 -->
        <el-main style="padding: 0;">
            <!-- 幻灯片 -->
            <el-carousel height="920px">
                <el-carousel-item :autoplay="false" v-for="item in carouselImages" :key="item.id">
                    <img v-if="item.image.indexOf('.mp4') == -1" :src="item.image" style="width: 100%;" />
                    <video v-else autoplay :src="item.image" type="video/mp4" muted></video>
                    <div class="p-a-full">
                        <p class="carousel-item-title">{{item.title}}</p>
                        <p class="carousel-item-subTitle" v-html="item.description"></p>
                    </div>
                </el-carousel-item>
            </el-carousel>
            <!-- 轮播图 -->
            <div class="swiper">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div v-for="(item, index) in slides" class="swiper-slide">
                        <el-link :href="item.href" :underline="false" class="noline">
                            <img :src="item.image" :alt="item.title" />
                        </el-link>
                    </div>
                </div>
                <!-- If we need navigation buttons -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
            <el-row type="flex" justify="center" class="hidden-md-down">
                <el-col :span="6" style="text-align: center;">
                    <el-link href="{:url('products/index')}" :underline="false">
                        {{ i18n[lang].searchMore }}<i class="el-icon-d-arrow-right el-icon--right"></i>
                    </el-link>
                </el-col>
            </el-row>
            <!-- 系列模块 -->
            <el-row type="flex" justify="center" class="series">
                <el-col v-for="(item, index) in series" :key="index" :xs="24" :sm="24" :md="7" style="text-align: center; margin-top: 73px;">
                    <img v-if="item.src.indexOf('.mp4') == -1" :src="item.src" :alt="item.name" />
                    <video v-else autoplay :src="item.src" type="video/mp4" muted></video>
                    <br />
                    <el-link :href="item.href" :underline="false" class="name noline">
                        {{ item.name }}
                    </el-link>
                    <br />
                    <el-link :href="item.href" class="subName" :underline="false">
                        {{ i18n[lang].earlyExperience }}<i class="el-icon-arrow-right el-icon--right"></i>
                    </el-link>
                </el-col>
            </el-row>
            <!-- 按类别选购 -->
            <el-row type="flex" justify="center" class="category">
                <el-col :xs="24" :sm="24" :md="6" style="text-align: center;">
                    <span class="name">{{ i18n[lang].byCategory }}</span>
                    <br />
                    <span class="subName">{{ i18n[lang].outstanding }}</span>
                </el-col>
            </el-row>
            <el-row :gutter="27" type="flex" justify="center" style="margin: 0;">
                <el-col v-for="(cate, index) in category" :key="index" :xs="24" :sm="24" :md="3" style="text-align: center; margin-top: 35px;">
                    <a :href="cate.href"><img :src="cate.image" :alt="cate.name" style="width: 100%" /></a>
                    <br />
                    <el-link :href="cate.href" :underline="false" style="margin-top: 16px">
                        {{cate.name}}
                    </el-link>
                </el-col>
            </el-row>
            <!-- 东方韵 释雅趣 -->
            <el-row type="flex" justify="center" style="margin-top: 5.2vw;">
                <el-col :span="24" style="text-align: center;">
                    <img src="{$section.jianjie.image|cdnurl}" alt="{$section.jianjie.keywords}" style="width: 100%" />
                </el-col>
                <div class="p-a-full text-center">
                    <el-row type="flex" class="row-bg" justify="center">
                        <el-col :xs="24" :sm="24" :md="16">
                            <p class="poetry-title">{$section.jianjie.keywords}</p>
                            <p class="poetry-subTitle" v-html="poetrySubTitle"></p>
                            <!-- <p class="poetry-subTitle">{$section.jianjie.description}</p> -->
                            <div class="poetry-content hidden-md-down">
                                {$section.jianjie.content}
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-row>
            <!-- 经典系列 -->
            <div class="series2">
                <p class="name text-center p-b-50">{{ i18n[lang].classicSeries }}</p>
                <el-row :gutter="18" type="flex" justify="center" style="margin: 0;">
                    <el-col v-for="(item, index) in series2" :key="index" :xs="20" :sm="10" :md="5">
                        <el-card shadow="never">
                            <el-link :href="item.href" :underline="false" class="noline">
                                <img :src="item.image" :alt="item.name" />
                            </el-link>
                            <br />
                            <el-link :href="item.href" :underline="false" class="name noline" style="margin-top: 20px;">
                                {{ item.name }}
                            </el-link>
                            <br />
                            <el-link :href="item.href" :underline="false" class="subName noline">
                                {{ item.title }}
                            </el-link>
                            <br />
                            <el-link :href="item.href" :underline="false" class="m-t-30">
                                {{ i18n[lang].browseSeries }}<i class="el-icon-arrow-right el-icon--right"></i>
                            </el-link>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <!-- 品牌故事 -->
            <el-row type="flex" justify="center" class="brand">
                <el-col :xs="24" :sm="24" :md="19" class="text-center">
                    <img src="{$section.gushi.image|cdnurl}" alt="{$section.gushi.keywords}" />
                </el-col>
                <div class="p-a-full text-center" style="right: 14vw;">
                    <el-row type="flex" class="row-bg" justify="end">
                        <el-col :md="24" :lg="8" class="brand-wrap">
                            <p class="brand-logo"><img src="/static/images/logo2.png"></p>
                            <p class="brand-title">{$section.gushi.keywords}</p>
                            <div class="brand-content">
                                {$section.gushi.content}
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-row>
            <!-- 关于我们 -->
            <el-row :gutter="30" type="flex" justify="center" class="aboutus">
                <el-col v-for="(item, index) in aboutusList" :key="index" :xs="24" :sm="24" :md="8" style="text-align: center; margin-top: 50px;">
                    <img :src="item.image" :alt="item.name" />
                    <br />
                    <el-link :href="item.href" :underline="false" class="name noline">
                        {{ item.name }}
                    </el-link>
                    <br />
                    <el-link :href="item.href" :underline="false" v-html="item.title" class="subName noline">
                    </el-link>
                    <br />
                    <el-link :href="item.href" :underline="false">
                        {{ item.more }}
                    </el-link>
                </el-col>
            </el-row>
            <!-- 联系我们 -->
            <div class="contactus">
                <p class="name text-center">{{ i18n[lang].exclusive }}</p>
                <el-row type="flex" justify="center">
                    <el-col v-for="(item, index) in contactusList" :key="index" :xs="24" :sm="24" :md="6"
                    style="text-align: center; margin-top: 50px;">
                        <img :src="item.image" :alt="item.name" />
                        <br />
                        <el-link :href="item.href" :underline="false" class="name noline">
                            {{ item.name }}
                        </el-link>
                        <br />
                        <el-link :href="item.href" :underline="false" class="subName noline">
                            {{ item.title }}
                        </el-link>
                        <br />
                        <el-popover
                            v-if="item.id == 24"
                            placement="right"
                            width="200"
                            trigger="click">
                            <img src="https://shushuo-site.oss-cn-nanjing.aliyuncs.com/uploads/20240804/8b4284a897f9547af6cff69e6152a139.jpg" width="100%"/>
                            <el-link slot="reference" href="javascript:;" :underline="false">
                                {{ item.more }}<i class="el-icon-arrow-right el-icon--right"></i>
                            </el-link>
                        </el-popover>
                        <el-link v-else :href="item.href" :underline="false">
                            {{ item.more }}<i class="el-icon-arrow-right el-icon--right"></i>
                        </el-link>
                    </el-col>
                </el-row>
            </div>
        </el-main>

        <!-- 底部 -->
        {include file="common/foot" /}
    </div>

    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    i18n: {
                        "zh-cn": {
                            "searchMore": "搜索更多",
                            "earlyExperience": "抢先体验",
                            "byCategory": "按类别选购",
                            "outstanding": "杰出设计与精湛匠心工艺",
                            "classicSeries": "经典系列",
                            "browseSeries": "浏览此系列",
                            "exclusive": "尊享体验",
                        },
                        "en": {
                            "searchMore": "Search More",
                            "earlyExperience": "Early Experience",
                            "byCategory": "By Category",
                            "outstanding": "Outstanding Design And Exquisite Craftsmanship",
                            "classicSeries": "Classic",
                            "browseSeries": "Browse",
                            "exclusive": "Exclusive Experience",
                        }
                    },
                    lang: "{$lang == 'en' ? 'en' : 'zh-cn'}",
                    activeIndex: "1",
                    isMenuOpen: false,
                    drawer: false,
                    menuItems: [
                        {include file="common/head_js" /}
                    ],
                    carouselImages: [
                        {volist name="$section.banner" id="vo"}
                        { image: "{$vo.image|cdnurl}", href: "{$vo.link}", title: "{$vo.name}",description: "{$vo.description}" },
                        {/volist}
                ],
                // 轮播数据
                slides: [
                    {volist name="$section.recommendProducts" id="vo"}
                    { image: "{$vo.image|cdnurl}", href: "{:url('/index/products/show',['id'=>$vo.id])}", title: "{$vo.name}" },
                    {/volist}
                ],
            series: [
                {volist name="$section.recommendList" id="vo"}
                    { name: "{$vo.name}", src: "{if $vo.file}{$vo.file|cdnurl}{else}{$vo.image|cdnurl}{/if}", href: "{:url('/index/products/index',['series_id'=>$vo.id])}" },
                {/volist}
                ],
            series2: [
            {volist name="$section.recommendList2" id="vo"}
                    { name: "{$vo.name}", image: "{$vo.image|cdnurl}", video: "{$vo.file|cdnurl}", title: "{$vo.keywords}", href: "{:url('/index/products/index',['series_id'=>$vo.id])}" },
            {/volist}
        ],
            category: [
            {volist name="$section.protype" id="vo"}
                    { name: "{$vo.name}", image: "{$vo.image|cdnurl}", href: "{:url('index/products/index',['lanmu'=>7,'category_id'=>$vo.id])}" },
            {/volist}
        ],
            aboutusList: [
            {volist name="$section.news" id="vo" key="k"}
                    { name: "{$vo.name}", image: "{$vo.image|cdnurl}", title: "{$vo.description}", href: "{:url('news/show',['lanmu'=>$lanmu,'cid'=>$vo.newstype,'id'=>$vo.id])}", more: "{$vo.keywords|trim}" },
            {/volist}
        ],
            contactusList: [
            {volist name="$section.tiyan_list" id="vo" key="k"}
                    {id: "{$vo.id}", name: "{$vo.name}", image: "{$vo.image|cdnurl}", title: "{$vo.description}", href: "{:url('about/danye_show',['id'=>$vo.id])}", more: "{$vo.keywords|trim}" },
            {/volist}
        ],
            footerList: [
            {include file="common/foot_js" /}
        ],
            poetrySubTitle : "{$section.jianjie.description}"
            };
        },
        mounted() {
            this.initSwiper();
            // initLazyload();
        },
        methods: {
            initSwiper() {
                const that = this
                const swiper = new Swiper(".swiper", {
                    slidesPerView: 1,
                    spaceBetween: 100,
                    breakpoints: {
                        // when window width is >= 992px
                        992: {
                            slidesPerView: 4,
                            spaceBetween: 20
                        }
                    },
                    direction: 'horizontal',
                    autoHeight: true,
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                });
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        },
    });
    </script>
</body>

</html>